<template>
    <div class="pingjia">
        <head_><h1>评价</h1></head_>
        <div class="pingjia_all">
            <div class="xingxing">
                <p>
                    手续办理：
                    <van-rate
                            @change="onChange"
                            v-model="value1"
                            gutter=".39rem"
                            size=".51rem"
                            color="#ffae3a"
                            void-icon="star"
                            void-color="#eee"
                            allow-half
                    />
                </p>
                <p>
                    车辆情况：
                    <van-rate
                            @change="onChange"
                            v-model="value2"
                            gutter=".39rem"
                            size=".51rem"
                            color="#ffae3a"
                            void-icon="star"
                            void-color="#eee"
                            allow-half
                    />
                </p>
                <p>
                    服务态度：
                    <van-rate
                            @change="onChange"
                            v-model="value3"
                            gutter=".39rem"
                            size=".51rem"
                            color="#ffae3a"
                            void-icon="star"
                            void-color="#eee"
                            allow-half
                    />
                </p>
            </div>
            <div
                    id="a"
                    class="input"
                    contenteditable="true"
                    placeholder="感谢您对平驾的支持，来说说您的评价之旅吧！"
                    @blur="blur"
            ></div>
            <div class="btn_">
                <van-button :disabled="disabled" @click="tijiao" type="info">
                    匿名提交
                </van-button>
            </div>
        </div>
    </div>
</template>

<script>
    import head_ from "./header";

    export default {
        props: {},
        data() {
            return {
                value1: '',
                value2: '',
                value3: '',
                content: '',
                s: {},
                disabled: true,
                id: '',
                clientId: ''

            };
        },

        methods: {
            // 重置
            resetForm(formName) {
                this.$nextTick(() => {
                    this.$refs[formName].resetFields();
                })
            },
            tijiao() {
                let id = 0;
                let clientid = 0;
                if (this.$route.params && this.$route.params.id) {
                    id = this.$route.params.id
                }
                if (this.$route.params && this.$route.params.clientid) {
                    clientid = this.$route.params.clientid
                }
                this.s.carId = id
                this.s.clientId = clientid
                this.s.value1 = this.value1
                this.s.value2 = this.value2
                this.s.value3 = this.value3
                this.s.content = this.content
                console.log(this.content)
                this.$http.post("/feedback/api/comment/carComment", this.s).then(resp => {
                    console.log(resp.data.data)
                    if (resp.data.code === 200) {
                        this.$toast.success("评价成功，经验值+5！");
                        this.value1 = ''
                        this.value2 = ''
                        this.value3 = ''
                      document.getElementsByClassName("input")[0].innerText='';

                        //document.getElementById("a").innerText='';

                      console.log("1111"+content)
                    }
                })
            },
            onChange(value1) {
                // console.log(value1)
                value1('当前值:' + value1);
            },
            onChange(value2) {
                console.log(value2)
                // value2('当前值:'+value2);
            },
            onChange(value3) {
                console.log(value3)
                // value3('当前值:'+value3);
            },
            blur(e) {

                // console.log(e);
                // console.log(document.getElementsByClassName("input")[0].innerText);
                let content = document.getElementsByClassName("input")[0].innerText;
                if (content !== "") {
                    this.disabled = false;
                } else {
                    this.disabled = true;
                }
                this.content = content
                console.log(content)
            },
        },
        components: {
            head_,
        },
    };
</script>

<style scoped lang="less">
    .pingjia {
        width: 100%;
        font-size: 0;

        .pingjia_all {
            width: 90%;
            margin: 0 auto;

            .xingxing {
                width: 100%;
                height: 2.74rem;
                margin-top: 0.34rem;
                display: flex;
                flex-direction: column;
                justify-content: space-evenly;
                align-items: center;

                p {
                    font-size: 0.31rem;
                    font-weight: 600;
                    letter-spacing: 0.02rem;
                    display: flex;
                    justify-content: space-evenly;
                    align-items: center;
                }
            }

            .input {
                width: 88%;
                height: 1.99rem;
                border: 0.01rem solid #ddd;
                margin: 0.2rem auto;
                border-radius: 0.08rem;
                padding: 0.23rem;
                font-size: 0.29rem;
                background: #f7f7f7;
            }

            .input:empty::before {
                content: attr(placeholder);
                color: #ccc;
                font-size: 0.29rem;
            }

            .btn_ {
                text-align: center;

                .van-button--info {
                    width: 88%;
                    height: 1rem;
                    margin-top: 0.1rem;
                    background: rgb(180, 180, 180);
                    border-radius: 0.08rem;
                    color: white;
                    font-size: 0.34rem;
                    border: 0;
                }
            }
        }
    }
</style>
